<!-- eslint-disable vue/html-self-closing -->
<template>
  <div class="lib">
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->
    <div id="container" style="width:1000px; height:600px"></div>

  </div>
</template>

<script >
import * as echarts from 'echarts'
import 'echarts/extension/bmap/bmap'

// 倒柱状图---------------------------------------------------------

export default {

  mounted() {
    this.loadScript()
  }, methods: {
    init() {
      var BMapGL = window.BMapGL
      var map = new window.BMapGL.Map('container')
      var point = new window.BMapGL.Point(116.404, 39.915)
      map.centerAndZoom(point, 6)
    },
    loadScript() {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
      script.onload = () => {
        this.init()
      }
      document.body.appendChild(script)
    }
  }

}
</script>

<style lang="scss" scoped>
.lib{
  display: flex;
  flex-wrap: wrap;
  &>div{
    width: 50%;
    height: 300px;
  }
}
</style>
